<!DOCTYPE html>
<html lang="en">
	<head>

		

		
		
	</head>
	<body>
		
		<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
		<div class="md-modal md-effect-3" id="modal-3">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>1</p>
					<p>2</p>
					<p>3</p>
					<button class="md-close" onclick="hidemodal()">Close me!</button>
				</div>
			</div>
		</div>
		
		<div style="text-align: center; padding: 30px;">
			<button class="md-trigger" data-modal="modal-3" onclick="showmodal()">从下到上显示</button>
			<button class="md-trigger" data-modal="modal-1" onclick="testshow()">全面显示</button>
			<button class="md-trigger" data-modal="modal-1" onclick="testshow2()">从下到上（自制）</button>
		</div>
		<!-- /container -->
		<!-- the overlay element -->
		
		
		<div style="" class="modal" id="test" onclick="this.className = 'modal'"></div>
		
		<div style="" class="modal-2" id="test2" onclick="this.className = 'modal-2'"></div>
	
		<div style="" class="modal" id="test" onclick="this.className = 'modal'">动画</div>
	
	<style>
	.modal{
		height: 200px;width:500px;margin: auto; background-color: #007DDB;visibility:hidden;
		transform: scale(0.2);
		transition: all 0.3s;
		opacity: 0;
	}
	.modal.show{
		transform: scale(1);visibility: visible;
		opacity: 1;
	}
	
	.modal-2{
		height: 200px;width:500px;margin: auto; background-color: #007DDB;position: absolute;top: 100px;left: 50%;
		
		visibility:hidden;
		transform: translateY(50%);
		transition: all 0.3s;
		opacity: 0;
	}
	.show.modal-2{
		transform: translateY(0);visibility: visible;
		opacity: 1;
	}

	</style>

	<script>
		var modal = document.getElementById('modal-3');
		function showmodal(){
			modal.className = 'md-modal md-effect-3 md-show';
		}
		function hidemodal(){
			modal.className = 'md-modal md-effect-3';
		}
		
		function testshow(){
			var test = document.getElementById('test');
			test.className = 'modal show';
		}
		
		function testshow2(){
			var test = document.getElementById('test2');
			test.className = 'modal-2 show';
		}
	</script>

	</body>
</html>